<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="OrderNo" min-width="200">
      <template #default="{ row }">
        {{ filters.orderNoFilter(row.orderNo) }}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template #default="{ row }">
        ¥{{ toThousandFilter(row.price) }}
      </template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template #default="{ row }">
        <el-tag :type="filters.statusFilter(row.status)">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { getDashboardTable } from '@/api/dashboard'
import { toThousandFilter } from '@/utils/filter'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

const list = ref([])
const getList = async () => {
  try {
    const { data } = await getDashboardTable()
    list.value = (data as any).list
  } catch (error) {
    ElMessage.error((error as any).msg)
  }
}

const statusMap = {
  success: 'success',
  pending: 'danger'
}
type statusType = 'success' | 'pending'

const filters = { 
  orderNoFilter: (str: string) => {
    return str.substring(0, 30)
  },
  statusFilter: (status: statusType) => {
    return statusMap[status]
  }
}

onMounted(() => {
  getList()
})
</script>